<template lang="pug">
    sbpro-layout-default(
        footerClasses='bg-cse footer-dark'
    )
        sbpro-top-nav(
            topNavClasses='bg-cse navbar-dark fixed-top',
            brandClasses='text-white',
            buttonClasses='btn-teal'
        )

        sbpro-page-header(
            headerClasses='bg-light page-header-light py-3 py-xl-4',
            borderType='',
            borderClasses='text-white',
        )
            .post-header.container-md

                //面包屑
                b-breadcrumb.m-0.px-0.px-sm-2.py-0
                    b-breadcrumb-item
                        router-link(to="/")
                            | {{breadcrumbItems[0].name}}
                    template(v-for="item in breadcrumbItems.slice(1, bLength)")
                        b-breadcrumb-item
                            router-link(:to="'/category/' + item.cid")
                                | {{item.name}}
                    b-breadcrumb-item(active)
                        | 正文

                h1.header-title.my-3.my-lg-4.py-lg-1 {{post.title}}

                p.mb-0.small.font-weight-300.text-lzu
                    span 日期:&nbsp;
                    span.font-weight-400.pr-3 {{post.datetime}}
                    span 阅读:&nbsp;
                    span.font-weight-400.pr-3 {{post.views}}
                    span 来源:&nbsp;
                    span.font-weight-400.pr-3 {{post.from}}



        sbpro-page-section(
            sectionClasses='pt-4 pb-5 pt-md-5 pb-md-10 bg-white',
            borderType='rounded',
            borderClasses='text-cse'
        )
            .container-md
                .row.justify-content-center
                    .col-xl-10
                        .post-content.text-indent-2
                            div(v-html='post.content')

                        hr.my-5
                        .text-center
                            router-link.btn.btn-transparent-dark.btn-marketing.rounded-pill.text-s(:to="'/category/' + cid")
                                | 返回至: {{categoryName}}

</template>

<script>
import SBProTopNav from '@structural/top-nav.vue';
import SBProPageHeader from '@structural/page-header.vue';
import SBProLayoutDefault from '@structural/layout-default.vue';
import SBProPageSection from '@structural/page-section.vue';
import { getPostDetailByPid } from '@/api/post';

export default {
    name: 'post',
    components: {
        'sbpro-top-nav': SBProTopNav,
        'sbpro-page-header': SBProPageHeader,
        'sbpro-layout-default': SBProLayoutDefault,
        'sbpro-page-section': SBProPageSection,
    },
    data() {
        return {
            phHeight: '0px',
            post: {
                cid: 0,
                title: '',
                dateTime: '',
                views: null,
                from: '',
                content: '',
            },
        };
    },
    computed: {
        cid() {
            return this.post.cid;
        },
        pid() {
            return parseInt(this.$route.params.pid);
        },
        categoryName() {
            return this.$store.getters.cName(this.cid);
        },
        bLength() {
            return this.breadcrumbItems.length;
        },
        breadcrumbItems() {
            return this.$store.getters.routerParents(this.cid);
        },
    },
    created() {
        getPostDetailByPid(this.pid).then(postDetail => {
            this.post = postDetail;
        });
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.breadcrumb {
    background-color: inherit;
    .breadcrumb-item {
        a {
            color: inherit;
        }
    }
}
</style>
